<template>
  <div class="orders">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-table class="margin-20" :data="orderlist" border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="order_fapiao_title" label="用户">
      </el-table-column>
      <el-table-column prop="order_fapiao_content" label="类型">
      </el-table-column>
      <el-table-column prop="order_price" label="价格">
      </el-table-column>
      <!-- <el-table-column prop="order_number" label="数量">
      </el-table-column> -->
      <el-table-column prop="is_send" label="订单是否发货">
      </el-table-column>
      <el-table-column label="订单支付方式">
        <template slot-scope="scope" prop="order_pay">
          <span>{{scope.row.order_pay | fmtLevel1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态">
        <template slot-scope="scope" prop="pay_status">
          <span>{{scope.row.pay_status | fmtLevel}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单创建时间">
        <template slot-scope="scope" prop="create_time">
          <span>{{scope.row.create_time | fmtLeveltime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showGrantDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!-- 编辑用户对话框 -->
      <el-dialog title="修改订单" :visible.sync="editDialogFormVisible">
        <el-form :model="editordersform" label-width="80px" :rules="rules" ref="editform">
          <el-form-item label="用户" prop="order_id">
            <el-input v-model="editordersform.order_id" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户" prop="order_fapiao_title">
            <el-input v-model="editordersform.order_fapiao_title" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="是否发货" prop="is_send">
            <el-input v-model="editordersform.is_send" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="order_pay">
            <el-input v-model="editordersform.order_pay" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label=" 订单价格 " prop="order_price">
            <el-input v-model="editordersform.order_price" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label=" 订单数量 " prop="order_number">
            <el-input v-model="editordersform.order_number" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label=" 支付状态 " prop="pay_status">
            <el-input v-model="editordersform.pay_status" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserSubmit('editform')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  let moment = require("moment");
  import {
    addorders,
    editorders,
    getordersById
  } from '@/api'
  import {
    formatDate
  } from '../../components/date.js';
  export default {
    data() {
      return {
        orderlist: [],
        query: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,
        editDialogFormVisible: false,
        editordersform: {
          order_id: '',
          order_fapiao_title: '',
          is_send: '',
          order_pay: '',
          order_price: '',
          order_number: '',
          pay_status: ''
        },
        rules: {
          is_send: [{
            required: true,
            message: '是否发货',
            trigger: 'blur'
          }],
          order_pay: [{
            required: true,
            message: '是否支付',
            trigger: 'blur'
          }],
          order_price: [{
            required: true,
            message: '订单价格',
            trigger: 'blur'
          }],
          order_number: [{
            required: true,
            message: '订单数量',
            trigger: 'blur'
          }],
          pay_status: [{
            required: true,
            message: '支付方式',
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.initList()
    },
    filters: {
      fmtLevel(pay_status) {
        if (pay_status == 0) {
          return '未支付'
        } else {
          return '已付款'
        }
      },
      fmtLevel1(order_pay) {
        if (order_pay == 0) {
          return '未付款'
        } else if (order_pay == 1) {
          return '支付宝'
        } else if (order_pay == 2) {
          return '微信'
        } else {
          return '银行卡'
        }
      },
      fmtLeveltime(create_time) {
        return moment(create_time * 1000).format('YYYY-MM-DD')
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      showEditDialog(row) {
        console.log(row)
        this.editDialogFormVisible = true
        getordersById(row.order_id).then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            console.log(res)
            if (res.data.pay_status == 1) {
              res.data.pay_status = '已付款'
            } else {
              res.data.pay_status = '未付款'
            }
            switch (res.data.order_pay) {
              case '0':
                res.data.order_pay = '未支付'
                break
              case '1':
                res.data.order_pay = '支付宝'
                break
              case '2':
                res.data.order_pay = '微信'
                break
              case '3':
                res.data.order_pay = '银行卡'
                break
            }
            this.editordersform.order_id = res.data.order_id
            this.editordersform.is_send = res.data.is_send
            this.editordersform.order_pay = res.data.order_pay
            this.editordersform.order_price = res.data.order_price
            this.editordersform.order_number = res.data.order_number
            this.editordersform.pay_status = res.data.pay_status
            this.editordersform.order_fapiao_title = res.data.order_fapiao_title
          }
        })
      },
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(1231)
            console.log(this.editordersform)
            editorders(this.editordersform.order_id,this.editordersform.order_price).then(res => {
              if (res.meta.status === 200) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
          }
        })
      },
      initList() {
        this.loading = true
        addorders({
          params: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize,
            // user_id: this.user_id,
            // pay_status: this.pay_status,
            // is_send: this.is_send,
            // order_fapiao_title: this.order_fapiao_title,
            // order_fapiao_company: this.order_fapiao_company,
            // order_fapiao_content: this.order_fapiao_content,
            // consignee_addr: this.consignee_addr
          }
        }).then(res => {
          console.log(res)
          this.orderlist = res.data.goods
          this.total = res.data.total
          this.loading = false
          // this.orderlist.map((item, index) => {
          //   console.log(item)
          //   console.log(index)
          //   if (item.pay_status == 1) {
          //     item.pay_status = '已付款'
          //   } else {
          //     item.pay_status = '未付款'
          //   }
          //   switch (item.order_pay) {
          //     case '0':
          //       item.order_pay = '未支付'
          //       break
          //     case '1':
          //       item.order_pay = '支付宝'
          //       break
          //     case '2':
          //       item.order_pay = '微信'
          //       break
          //     case '3':
          //       item.order_pay = '银行卡'
          //       break
          //   }
          //   item.create_time = moment(item.create_time*1000).format('YYYY-MM-DD')
          // })
          console.log(this.orderlist)
        })
      },
    }
  }

</script>
<style lang="scss" scoped>

</style>
